<template>
  <body>
    <!-- 主体区域 -->
    <section id="todoapp" class="">
      <!-- 输入框 -->
      <header class="header">
        <h1>小码记事本</h1>
        <input
          v-model="inputValue"
          autofocus="autofocus"
          autocomplete="off"
          placeholder="请输入任务"
          class="new-todo"
          @keyup.enter="add"
        />
      </header>
      <!-- 列表区域 -->
      <section class="main">
        <ul class="todo-list">
          <li class="todo" v-for="(item, index) in list">
            <div class="view">
              <span class="index">{{ index + 1 }}.</span>
              <label>{{ item }}</label>
              <button class="destroy" @click="remove(index)">X</button>
            </div>
          </li>
          <!-- 统计和清空 -->
          <li class="todoSum">
            <span><strong v-text="list.length"></strong>items total</span>
            <button v-show="list.length != 0" class="clear" @click="clear">
              Clear
            </button>
          </li>
        </ul>
      </section>
    </section>
  </body>
</template>
<script>
export default {
  data() {
    return {
      list: ["吃饭饭", "睡觉觉", "写代码"],
      inputValue: "",
    };
  },
  methods: {
    add: function () {
      this.list.push(this.inputValue);
    },
    remove: function (index) {
      this.list.splice(index, 1);
    },
    clear: function () {
      this.list = [];
    },
  },
};
</script>
<style lang="css">
* {
  margin: 0;
  padding: 0;
}
#todoapp {
  height: 800px;
  width: 700px;
  margin: 100px auto;
}
.header {
  width: 700px;
  border: 1px solid yellowgreen;
  text-align: center;
  color: tomato;
  font-size: 25px;
}
.header h1 {
  font-weight: lighter;
  opacity: 0.9;
}
.new-todo {
  padding-left: 18px;
  font-size: medium;
  width: 382px;
  height: 45px;
  border: none;
  border: 1px solid gainsboro;
  border-radius: 5px 5px 0 0;
  outline: none;
  background-color: rgb(242, 247, 248);
}
.todo-list {
  border: 1px solid gainsboro;
  color: gray;
  width: 700px;
  margin-top: 0px;
  box-shadow: 4px 4px 8px gainsboro;
  border-radius: 0 0 15px 15px;
  background-color: rgb(242, 247, 248);
}
.todo {
  position: relative;
  left: 40px;
  width: 700px;
  height: 36px;
  padding-top: 10px;
  margin-left: -26px;
  border-bottom: 1px solid gainsboro;
  list-style-type: none;
}
.todoSum {
  position: relative;
  left: 40px;
  list-style-type: none;
  height: 30px;
  padding-top: 10px;
  margin-left: -26px;
  font-size: small;
  opacity: 0.7;
}
.clear {
  position: relative;
  left: 500px;
  color: gray;
  border: none;
  outline: none;
  background-color: transparent;
}
.destroy {
  position: relative;
  /*left: 380px;*/
  /*border: none;*/
  /*display: none; */
  color: red;
}
.destroy:hover {
  opacity: 0.8;
}
</style>
